import React, { Component } from 'react';
import zrender from 'zrender';
import '../css/home.scss';

class Home extends Component {

      componentDidMount() {
            //让canvas在屏幕上上下左右居中
            let homeContainer = document.querySelector('.home-container');
            let windowHeight = document.documentElement.scrollHeight;
            homeContainer.style.height = windowHeight * 0.1 + 'rem';

            //绘制图形
            let myGraphics = zrender.init(document.querySelector('.canvas'));
            let hollowCircle = new zrender.Circle({
                  shape: {
                        cx: 300,
                        cy: 300,
                        r: 200
                  },
                  style: {
                        fill: 'none',
                        stroke: 'white',
                        opacity: '0.9',
                  }
            });
            let inCircle = new zrender.Circle({
                  shape: {
                        cx: 300,
                        cy: 300,
                        r: 190
                  },
                  style: {
                        fill: 'white',
                        stroke: 'none',
                        opacity: '0.8',
                  }
            });
            let inLeftCircle = new zrender.Circle({
                  shape: {
                        cx: 160,
                        cy: 160,
                        r: 40
                  },
                  style: {
                        fill: 'black',
                        stroke: 'none',
                        opacity: '1',
                  }
            });
            let inRightCircle = new zrender.Circle({
                  shape: {
                        cx: 440,
                        cy: 160,
                        r: 40
                  },
                  style: {
                        fill: 'black',
                        stroke: 'none',
                        opacity: '1',
                  }
            });
            //在外部初始化，节约性能，这是必须的，否则动画延时非常严重
            let musicSpectrumRect = new zrender.Rect({
                  shape: {
                        x: 290,
                        y: 380,
                        width: 20,
                        height: 0,
                  },
                  style: {
                        fill: 'black',
                        stroke: 'none',
                        opacity: '0.9',
                  }
            });


            myGraphics.add(hollowCircle);
            myGraphics.add(inCircle);
            myGraphics.add(inLeftCircle);
            myGraphics.add(inRightCircle);

            //获取音频的缓冲数据用来可视化
            let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            let myAudio = document.querySelector('#audio');
            //获取音频数据
            let source = audioCtx.createMediaElementSource(myAudio);
            //创建分析器
            let analyser = audioCtx.createAnalyser();
            //设定分析频率
            analyser.fftSize = 4096;
            //连接音源和分析器
            source.connect(analyser);
            //连接分析器和播放器
            analyser.connect(audioCtx.destination);
            function Draw() {
                  let array = new Uint8Array(64);
                  analyser.getByteFrequencyData(array);

                  //遍历array
                  for (let i = 0, j = array.length; i < j; i++) {
                        //绘制最底层的空心圆
                        // eslint-disable-next-line
                        let rad = 0;
                        if (array[3] > 210) {
                              rad = array[3] - 210;
                        } else {
                              rad = 0;
                        }
                        hollowCircle.attr('shape', {
                              r: rad + 200,
                        });
                        inCircle.attr('shape', {
                              r: rad + 190,
                        });

                        musicSpectrumRect.attr('shape', {
                              height: array[56] / 2,
                        });
                        myGraphics.add(musicSpectrumRect);

                  }
                  window.requestAnimationFrame(Draw);
            }
            setTimeout(Draw, 500);
      }

      render() {
            return (
                  <div className="home-container" >
                        <div id="message"></div>
                        <div className="flex-container">
                              <div className="canvas">
                              </div>
                        </div>
                  </div>
            )
      }
}

export default Home;
